import { Component, OnInit, HostBinding } from '@angular/core';
import { Crisis } from './crisis.service';
import { Router, ActivatedRoute } from '@angular/router';
import { slideInDownAnimation } from '../animations';

@Component({
  template: `
    <div *ngIf="crisis">
    <h3>"{{ editName }}"</h3>
    <div>
      <label>Id: </label>{{ crisis.id }}</div>
    <div>
      <label>Name: </label>
      <input [(ngModel)]="editName" placeholder="name"/>
    </div>
    <p>
      <button (click)="save()">Save</button>
      <button (click)="cancel()">Cancel</button>
    </p>
  </div>
  `,
  styles: ['input {width: 20em}'],
  animations: [ slideInDownAnimation ]
})

export class CrisisDetailComponent implements OnInit {
  @HostBinding('@routeAnimation')
  routeAnimation = true;
  @HostBinding('style.display')
  display = 'block';
  @HostBinding('style.position')
  position = 'absolute';

  crisis: Crisis;
  editName: string;
  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}

  gotoCrises() {
    const crisisId = this.crisis ? this.crisis.id : null;
    this.router.navigate(['../', {id: crisisId}], {relativeTo: this.route});
  }

  ngOnInit() {
    console.log('detail init');
    this.route.data.subscribe((data: {crisis: Crisis}) => {
      console.log(data);
      this.editName = data.crisis.name;
      this.crisis = data.crisis;
    });
  }

  cancel() {
    this.gotoCrises();
  }

  save() {
    this.crisis.name = this.editName;
    this.gotoCrises();
  }

}
